﻿<template>
  <div>
    <!-- 显示 API 响应的选项 -->
    <h2>API 响应示例</h2>
    <p>{{ apiResponse }}</p>

    <!-- 按钮用于调用 increment 方法 -->
    <button @click="increment">增加计数器</button>

    <!-- 显示计数器的值 -->
    <p>计数器: {{ count }}</p>

    <!-- 显示嵌套对象的值 -->
    <h2>嵌套对象示例</h2>
    <p>嵌套对象计数器: {{ obj.nested.count }}</p>
    <p>obj显示: {{ obj }}</p>
    <!-- 按钮用于调用 mutateDeeply 方法 -->
    <button @click="mutateDeeply">深度更改状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // API 响应的选项
      apiResponse: '这是API的响应数据',

      // 计数器
      count: 0,

      // 嵌套对象和数组
      obj: {
        nested: { count: 0 },
        arr: ['foo', 'bar']
      }
    }
  },
  methods: {
    // 增加计数器的方法
    increment() {
      this.count++
    },

    // 深度更改状态的方法
    mutateDeeply() {
      // 以下都会按照期望工作
      this.obj.nested.count++
      this.obj.arr.push('baz')
    }
  },
  // mounted() {
  //   // 在其他方法或生命周期中也可以调用方法
  //   this.increment()
  //   this.mutateDeeply()
  // }
}
</script>
